<template>
    <div>
        <!-- 传送门 -->
        <teleport to='.header'>
            <SdyHeader title="仿京东登录注册"></SdyHeader>
        </teleport>

        <div class="box">
            <van-form @submit="submitHandler">
                <van-cell-group inset>
                    <van-field
                    v-model="userInfo.loginname"
                    name="loginname"
                    label="用户名"
                    placeholder="请输入您的用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]"
                    class="box-input"
                    />
                    <van-field
                    v-model="userInfo.password"
                    type="password"
                    name="password"
                    label="密码"
                    placeholder="请输入您的密码"
                    class="box-input"
                    :rules="[{ required: true, message: '请填写密码' }]"
                    />
                </van-cell-group>
                <div style="margin: 16px;">
                    <van-button class="login-button" round block type="primary" native-type="submit">
                    登录
                    </van-button>
                </div>
            </van-form>
        </div>
        <div class="box2">
            <p>手机号登录登录</p>
            <p @click="$myRouter.push('/register')">手机快速注册</p>
        </div>
        <div class="footer">
            <div class="footer-top">
                <hr>
                <p>其他登录方式</p>
            </div>
            <div class="footer-er">
                <img src="Snipaste_2023-07-08_08-34-10.png" alt="">
            </div>
            <div class="footer-di">
                <input type="checkbox" v-model="userInput" @click="userInput = !userInput">
                若您输入的手机号未注册，将为您直接出则，注册即视为同意 <a href="#">仿京东用户注册协议，用户隐私政策</a>
            </div>
        </div>
    </div>
</template>

<script name="sdyList" lang="ts" setup>
import SdyHeader from '../../components/header.vue'
import { ref } from 'vue';
import { showSuccessToast, showFailToast } from 'vant'
import { useRouter } from 'vue-router'
import { login } from '../../model/users'

const $myRouter = useRouter()

interface User {
  loginname: string
  password: string
}
interface ResponseInfo {
  code: string
  data?: {
    token: string
    userid: string
  },
  message: string
}

    const userInfo = ref<User>({ loginname: '', password: '' })
    const userInput = ref<boolean>(false)
// 表单提交事件
const submitHandler = async (userInfo: User) => {
    //判断是否勾选
    if (!userInput.value) {
        showFailToast('请勾选注册协议，用户隐私政策')
        return
    }
  const res = await login(userInfo)
  if ((res as unknown as ResponseInfo).code === '10011') {
    showFailToast('密码错误')
    return
  }

  if ((res as unknown as ResponseInfo).code === '10010') {
    showFailToast('该用户不存在')
    return
  }

  showSuccessToast('登录成功')

  // 把用户 id 的 token 存储起来
  console.log(res.data);
  
  window.localStorage.setItem('token', res.data.token)
  window.localStorage.setItem('user_id', res.data.userid)

  $myRouter.push('/')
}
</script>

<style scoped lang="scss">
a{
    color: #4a90e2;
}
.footer{
    .footer-di{
        font-size: 13px;
        text-align: center;
        color: #a6a6a6;
        box-sizing: border-box;
        padding: 20px;
    }

    .footer-er{
        width: 100%;
        height: 100%;
        margin-top: 20px;
        text-align: center;
        img{
            width: 250px;
        }
    }
    width: 100%;
    height: 170px;
    margin-top: 80px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    .footer-top{
        width: 80%;
        margin-left: 10%;
        position: relative;
        hr{
            width: 100%;
            margin-top: 20px;
            border-color: #f3f3f3;
        }
        p{
            position: absolute;
            top: 11px;
            left: 85px;
            color: #a6a6a6;
            background-color: #fff;
            padding: 0 30px;
        }

    }
}
.box2{
    width: 100%;
    height: 50px;
    margin-top: -30px;
    box-sizing: border-box;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #a6a6a6;
}
.box{
    width: 100%;
    height: 200px;
    padding-top: 30px;
    .login-button{
        background-color: #50bb78;
        border: 1px solid transparent;
        opacity: .8;
        height: 50px;
        font-size: 18px;
        letter-spacing: 10px;
    }
    .box-input{
        border-bottom: 1px solid #ccc;
    }
}
</style>

